<template>
  <div>
    <el-card class="box-card">
      <template>
        <!-- 角色管理 -->
        <el-tabs>
          <el-tab-pane label="角色管理" lazy>
            <el-button
              type="primary"
              size="small"
              @click="addClick"
            ><i class="el-icon-plus" /> 新增角色</el-button>
            <!-- 角色管理表格 -->
            <div class="roleTab">
              <el-table :data="List" style="width: 100%" border>
                <el-table-column label="序号" width="180">
                  <template slot-scope="{ $index }">
                    {{ (size - 1) * pageSize + $index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="角色名" width="180" />
                <el-table-column prop="description" label="描述" width="300" />
                <el-table-column label="操作">
                  <template slot-scope="{ row }">
                    <el-button type="text" size="small"> 分配权限 </el-button>
                    <el-button type="text" size="small" @click="editRole(row)">
                      修改
                    </el-button>
                    <el-button
                      type="text"
                      size="small"
                      @click="delRole(row.id)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="page">
              <el-pagination
                :current-page="size"
                :page-sizes="[1, 2, 5, 10, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-tab-pane>
          <!-- 公司信息 -->
          <el-tab-pane label="公司信息">
            <!-- 公司信息表单 -->
            <info />
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-card>
    <!-- 新增弹框组件 -->
    <add ref="popout" :show.sync="isShow" @getData="getData" />
  </div>
</template>

<script>
import info from './components/info.vue'
import { sysRole, sysRoleDelete } from '@/api/setting'
import add from './components/add.vue'

export default {
  components: {
    info,
    add
  },

  data() {
    return {
      activeName: 'first',
      // 表格信息
      List: [{}],
      // 总共显示多少页
      total: 1,
      // 当前显示第几页
      size: 1,
      // 页容量
      pageSize: 5,
      // 新增弹框显示/隐藏
      isShow: false
    }
  },

  created() {
    this.getData()
  },

  methods: {
    // 修改页容量触发
    handleSizeChange(val) {
      this.pageSize = val
      this.size = 1
      this.getData()
    },
    // 修改当前页数触发
    handleCurrentChange(val) {
      this.size = val
      this.getData()
    },
    // 单独封装获取数据
    async getData() {
      const res = await sysRole({
        page: this.size,
        pagesize: this.pageSize
      })
      // console.log(res)
      this.List = res.data.rows
      this.total = res.data.total
    },
    // 打开新增弹框
    addClick() {
      this.isShow = true
      this.$refs.popout.mode = 'add'
    },
    // 删除角色
    delRole(id) {
      this.$confirm('确定要删除该角色吗', '提示')
        .then(async() => {
          await sysRoleDelete(id)
          this.size = 1
          this.$message.success('删除成功')
          this.getData()
        })
        .catch(() => {
          this.$message('取消删除')
        })
    },
    // 编辑角色
    editRole(row) {
      this.isShow = true
      this.$refs.popout.mode = 'edit'
      this.$refs.popout.form = JSON.parse(JSON.stringify(row))
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin: 15px;
  .roleTab {
    margin-top: 10px;
  }
  .page {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
